<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Zen JS</title>
    <script src="jquery-1.7.1.js"></script>
    <script src="Zen.js"></script>
    <script>
        jQuery(function () {
            var MyModel = Zen.extend(Zen.Model, {
                getData: function () {
                    this.fireEvent('got', 'abc');
                }
            });


            var MyController = Zen.extend(Zen.Controller, /** @lends MyController */ {
                initController: function () {
                    this.model = new MyModel();
                    /**
                     * @type {MyView}
                     */
                    this.view = new MyView();
                    this.control('.li', 'click', 'clickAction');
                    //this.control('root', 'click', 'clickAction', window);
                },
                clickAction: function (e) {
                    this.view.show();
                    this.view.test();
                    this.model.getData();
                }
            });

            var MyView = Zen.extend(Zen.View, {
                el: '#view',
                initView: function () {
                    console.log('MyView.initView', this.model);
                },
                test: function () {
                    this.el.find('ul').append('<li>add</li>');
                },
                show: function () {
                    console.log('my view show');
                },
                onDataGot: function (data) {
                    console.log('view got ', data);
                },
                onGot: function (data) {
                    console.log('view onGot', data);
                }
            });

            var c = new MyController();
        });
    </script>
</head>
<body>
<div id="view">
    <ul>
        <li class="li">1</li>
        <li class="li">2</li>
        <li class="">3</li>
    </ul>
</div>

</body>
</html>